<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>主页</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/static/css/font.css">
    <link rel="stylesheet" href="static/lib/layui/css/layui.css">
    <link rel="stylesheet" href="/static/css/common.css">
    <link rel="stylesheet" href="/static/css/dashboard.css">
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>
<section class="mainbody">
    <div class="layui-row">
        <div class="layui-col-xs12 layui-col-sm3 left-part">
            <div class="left-top">
                <div class="title">马达状态分布</div>
                <div id="quantity" class="layui-row"></div>
                <div id="quantity-pie"></div>
            </div>
            <div class="alertList">
                <div class="title">最新异常信息</div>
                <ul></ul>
            </div>
        </div>
        <div class="layui-col-xs12 layui-col-sm9 right-part">
            <div class="layui-row">
                <div class="layui-col-xs6 layui-col-md5">
                    <p class="legend">
                        <span>图例：</span>
                        <span><i class="alarm-lights gray-alarm"></i><span>离线</span></span>
                        <span><i class="alarm-lights green-alarm"></i><span>正常</span></span>
                        <span><i class="alarm-lights red-alarm"></i><span>异常</span></span>
                        <span><i class="alarm-lights blue-alarm"></i><span>保养</span></span>
                    </p>
                </div>
                <div class="layui-col-xs4 layui-col-md5">
                    <div class="layui-form" lay-filter="maintain">
                        <button class="layui-btn layui-btn-normal layui-btn-sm layui-btn-radius close-alarm">关闭报警灯</button>
                        <input type="checkbox" name="allMaintain" lay-skin="switch" lay-filter="allMaintain" lay-text="全部开线中|全部保养中">
                    </div>
                </div>
                <div class="layui-col-xs2 layui-col-md2 layui-form">
                    <select name="periods" lay-filter="periods" class="periods">
                        <option value="1">一期</option>
                        <option value="2" selected>二期</option>
                    </select>
                </div>
            </div>
            <div class="" id="motors-wrap">
            </div>
        </div>
    </div>
</div>
</section>
<script type="text/html" id="quantity-tpl">
        {{#  layui.each(d.list, function(index, item){ }}
        <div class="layui-col-xs4 total-info">
            <h3>{{ item.label }}</h3>
            <h2 class="{{ item.color }}">{{ item.value }}</h2>
        </div>
        {{#  }); }}
</script>
<script type="text/html" id="motors-tpl">
    {{#  layui.each(d.list, function(index, item){ }}
    {{# if(item.motorInfos.length > 0){ }}
    <div class="layui-form">
        <div class="areaName">{{ item.areaName }} (马达数量: {{ item.motorInfos.length }})</div>
        <div class="molist">
        {{#  layui.each(item.motorInfos, function(idx, ite){ }}
        <div class="motor">
            <h6 class="one-text">{{ ite.moName }}</h6>
            {{# if(ite.moHealthState === null){ }}
            <img src="/static/images/gray-alarm.gif" alt="{{ ite.moName }}" title="{{ ite.moName }},点击查看最新数据" data-area="{{ item.areaName }}" data-mo="{{ ite.moId }}">
            {{# }else{ }}
            <img src="/static/images/{{ ite.moHealthState }}-alarm.gif" alt="{{ ite.moName }}" title="{{ ite.moName }},点击查看最新数据" data-area="{{ item.areaName }}" data-mo="{{ ite.moId }}">
            {{# } }}
            {{# if(ite.moOpenState == 1){ }}
            <input type="checkbox" name="openState" lay-skin="switch" lay-filter="motorMaintain" data-moid="{{ ite.moId }}" lay-text="开线中|保养中" checked="">
            {{# }else{ }}
            <input type="checkbox" name="openState" lay-skin="switch" lay-filter="motorMaintain" data-moid="{{ ite.moId }}" lay-text="开线中|保养中">
            {{# } }}
        </div>
        {{#  }); }}
        </div>
    </div>
    {{# } }}
    {{#  }); }}
</script>
<script type="text/html" id="latest-tpl">
    <table class="layui-table">
        <thead>
        <tr>
            <th>测量时间</th>
            <th>振动烈度</th>
         <!--   <th>振幅上限</th>
            <th>振幅下限</th>-->
        </tr>
        </thead>
        <tbody class="lastedList">
        {{#  layui.each(d.list, function(index, item){ }}
            <tr>
                <td>{{ layui.util.toDateString(item.recTime) }}</td>
                <td>{{ item.rockData }}</td>
              <!--  <td>{{ item.upperLimit == -1 ? '未启用' : item.upperLimit}}</td>
                <td>{{ item.lowerLimit == -1 ? '未启用' : item.lowerLimit}}</td>-->
            </tr>
        {{#  }); }}
        </tbody>
    </table>
</script>
<script src="/static/lib/layui/layui.js"></script>
<script src="/static/js/common.js"></script>
<script src="/static/js/file/dashboard.js"></script>
</body>
</html>
